<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas</title>
</head>
<body onload="draw()" style="text-align: center;">
  <canvas id="canvas" width="800px" height="400px" style="border:1px solid #000;">浏览器版本太低不支持canvas</canvas>
  <script>
    function draw(){
      let canvas = document.getElementById("canvas");
      if(canvas.getContext){
        //创建context对象
        let cvsCtx = canvas.getContext("2d");
        cvsCtx.beginPath();
        cvsCtx.fillStyle = "pink";
        cvsCtx.save();
        cvsCtx.fillRect(50, 50, 50, 50);
        cvsCtx.beginPath();
        cvsCtx.fillStyle = "skyblue";
        cvsCtx.save();
        cvsCtx.fillRect(150, 50, 50, 50);
        cvsCtx.beginPath();
        cvsCtx.restore();
        cvsCtx.fillRect(50, 150, 50, 50);
        cvsCtx.beginPath();
        cvsCtx.restore();
        cvsCtx.fillRect(150, 150, 50, 50);

        //绘制文字
        //cvsCtx.font = 'style, weight, size, family';
       /*  cvsCtx.font = '160px italic';
        //阴影
        cvsCtx.shadowColor = '#ccc';
        //阴影模糊度，偏移
        cvsCtx.shadowBlur = 10;
        cvsCtx.shadowOffsetX = 20;
        cvsCtx.shadowOffsetY = 20;
      
        //cvsCtx.fillText('text', x, y);
        cvsCtx.fillText('RichQin', 20, 150); */
        //绘制图像
       /*  let img=new Image()
        img.src="飞机大战/img/bg.png";
        //等待图片加载完
        img.onload = function(){
          cvsCtx.drawImage(this,0,0);
        } */

       /*  cvsCtx.fillStyle = 'pink';
        cvsCtx.fillRect(0, 0, 200, 200); */
        //填充颜色
       /*  cvsCtx.fillStyle = '#000';
        //起始点
        cvsCtx.moveTo(0,0);
        //画线
        cvsCtx.lineTo(100,0);
        cvsCtx.lineTo(0,100);
        //填充
        cvsCtx.fill();
        //描边颜色
        cvsCtx.strokeStyle = '#000';
        cvsCtx.moveTo(10,110);
        cvsCtx.lineTo(110,110);
        cvsCtx.lineTo(110,110);
        cvsCtx.lineTo(110,10);
        cvsCtx.lineTo(10,110);
        //描边结束
        cvsCtx.stroke(); */

        //画圆(圆心x,y,半径,开始角度,结束角度,顺时针false/逆时针true)
       /*  cvsCtx.strokeStyle = '#000';
        //线宽
        //cvsCtx.lineWidth = 10;
        cvsCtx.beginPath();
        cvsCtx.arc(400, 200, 150, 0, 2*Math.PI, false);
        cvsCtx.moveTo(500, 200);
        cvsCtx.arc(400, 200, 100, 0, Math.PI, false);
        cvsCtx.closePath();
        cvsCtx.moveTo(370, 120);
        cvsCtx.arc(350, 120, 20, 0, 2*Math.PI, false);
        cvsCtx.moveTo(470, 120);
        cvsCtx.arc(450, 120, 20, 0, 2*Math.PI, false);
        cvsCtx.stroke(); */
 
      }
    }
    
  </script>
</body>
</html>